<template>
	<view id="soil">
		<view class="list-filter">
			<view class="filter-item" @click="showIndexList">
				{{projectName}}
				<!-- {{ queryParam.areaName == '' ? '全部项目' : queryParam.areaName }} -->
				<u-icon v-if="showProject" name="arrow-up" size="14"></u-icon>
				<u-icon v-else name="arrow-down" size="14"></u-icon>
			</view>
		</view>
		<u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
		<view class="soil-item">
			<u-subsection :list="listDate" mode="subsection" :current="curNowDate" @change="sectionChangeDate"></u-subsection>
			<view class="u-page">
				<view
					class="u-page-list"
					v-for="(item, index) in indexList"
					:key="index"
				>
					<text class="time">时间：{{ item.recordTime }}</text>
					<text class="img" @click="showImg(item.imgFileKey)">图片</text>
					<text class="name">项目名称：{{ item.projectName }}</text>
				</view>
			</view>
		</view>
		<!-- 查看图片 -->
		<u-popup :show="show" mode="center" @close="close">
			<view class="img-big-box">
				<img class="img-big" :src="imgFileKey" alt="">
			</view>
		</u-popup>
	</view>
</template>

<script>
	import config from '@/utils/defaultConfig'
	import {
		getChildren
	} from '@/api/global'
	import {
		realListData,
		onPreview2
	} from '@/api/soil'
	import {
		AREA_ID
	} from '@/store/mutaction-types'
	
	export default {
		data() {
			return {
				indexShow: false,
        list: ['裸土已覆盖', '裸土未覆盖'],
				curNow: 0,
        listDate: ['日', '周', '月', '年'],
				curNowDate: 0,
				indexList: [],
				show: false,
				showProject: false,
				areaId: uni.getStorageSync(AREA_ID),
				queryParam: {
					reasonable: false,
					orderBy: 'id desc',
					cycleEnum: 'HOUR24',
					coverageResult: '0',
					pageNum: 1,
					projectId: ''
				},
				problemLevOpts: [
					config.handleStatus
				],
				imgFileKey: '',
				projectList: [],
				projectName: '全部项目'
			}
		},
		onLoad(options){
			if (options.id) {
				this.queryParam.projectId = options.id;
				this.projectName = options.projectName
				this.indexList = []
				this.queryParam.pageNum = 1
			}
			this.getRealListData()
		},
		mounted() {
		},
		methods: {
			// 获取列表
			getRealListData () {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				const app = this
				const areaIds = []
				let query = ''
				getChildren(app.areaId).then(areas => {
					const ids = areas.data.data
					for (const k in ids) {
						areaIds.push(ids[k].id)
					}
					this.areaIds = areaIds.join(',')
					for (const k in app.queryParam) {
						query += `&${k}=${app.queryParam[k]}`
					}
					realListData(this.areaIds, query).then(res => {
						// this.indexList = res.data.rows
						const data = res.data.rows
						if (data.length > 0) {
							this.indexList = this.indexList.concat(res.data.rows)
						} else {
							uni.$u.toast('没有更多数据')
						}
					}).catch(error => {
						uni.$u.toast(error)
					}).finally(() => {
						uni.hideLoading()
					})
				})
			},
			// 滚动到底部触发事件
			onReachBottom() {
				this.queryParam.pageNum++
				this.getRealListData(this.queryParam)
			},
			// 下拉刷新
			onPullDownRefresh() {
				this.indexList = []
				this.queryParam.pageNum = 1
				this.getRealListData(this.queryParam)
				uni.stopPullDownRefresh()
			},
			// 裸土覆盖tab切换
			sectionChange(index) {
				this.indexList = []
				this.queryParam.pageNum = 1
				this.curNow = index;
				if (this.curNow === 0) {
						this.queryParam.coverageResult = '0'
				} else {
					this.queryParam.coverageResult = '1'
				}
				this.getRealListData()
			},
			// 日周月tab切换
			sectionChangeDate(index) {
				this.indexList = []
				this.queryParam.pageNum = 1
				this.curNowDate = index;
				if (this.curNowDate === 0) {
						this.queryParam.cycleEnum = 'HOUR24'
				} else if (this.curNowDate === 1) {
						this.queryParam.cycleEnum = 'WEEK'
				} else if (this.curNowDate === 2) {
						this.queryParam.cycleEnum = 'MONTH'
				} else {
						this.queryParam.cycleEnum = 'YEAR'
				}
				this.getRealListData()
			},
			// 查看图片
			showImg (imgFileKey) {
				this.show = true;
				onPreview2(imgFileKey).then(resp => {
					if (resp.data.code === 200) {
						// 添加缩略图参数
						this.imgFileKey = resp.data.msg
					}
				});
			},
			// 关闭图片弹窗
			close () {
				this.show = false;
			},
			// 显示全部项目
			showIndexList () {
				uni.navigateTo({
					url: '/packageB/selector/selector?from=' + 'soil' + '&to=soil'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	#soil {
		font-size: 28upx;
		height: 100vh;
		.filter-item {
			font-size: 32upx;
			flex-grow: 1;
			padding: 20upx 0;
			display: flex;
			justify-content: center;
			text-align: center;
			font-weight: bold;
		}
		.soil-item {
			margin-top: 30upx;
			padding: 0 40upx;
		}
		.u-page {
			margin-top: 20upx;
			.u-page-list {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				line-height: 40upx;
				padding: 20upx 0;
				border-bottom: 1px solid #dfdfdf;
				.car-num {
					width: 180upx;
					background-color: #007aff;
					color: #fff;
					border-radius: 6upx;
					text-align: center;
				}
				.time {
					// padding: 0 40upx;
				}
				.img {
					color: #007aff;
				}
				.name {
					width: 100%;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;
				}
			}
		}
		.img-big-box {
			width: 100vw;
		}
		.img-big {
			display: block;
			width: 100%;
		}
	}
</style>
